<template>
  <drag-dialog title="样式类定义" v-model="showDialog" @close="close">
    <div class="func-edit">
      <div class="edit-header">
        <div class="header-item">
          <div class="header-label">样式类名称</div>
          <el-input v-model="localData.className" placeholder="请输入类名" clearable />
        </div>
      </div>
      <div class="edit-content">
        <el-input type="textarea" :rows="10" v-model="localData.classStyle" placeholder="请输入样式类声明，每个声明用分号隔开" />
      </div>
    </div>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="close" />
    </template>
  </drag-dialog>
</template>
  
  <script>
export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false,
      localData: {}
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.showDialog = newVal;
      },
      immediate: true
    },
    showDialog: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    },
    data: {
      handler(val) {
        this.localData = val;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit() {
      if (!this.localData.className) {
        this.$message.error('请输入样式类名称');
        return;
      }
      this.$emit('submit', this.localData);
      this.close();
    },
    close() {
      this.showDialog = false;
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.func-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .edit-header {
    display: flex;
    align-items: center;
    gap: 10px;

    .header-item {
      display: flex;
      align-items: center;
      gap: 4px;

      .header-label {
        width: 100px;
      }
    }
  }

  .edit-content {
    width: 100%;
  }
}
</style>
  